<template>
  <div>
    <p>
      业务域名需经过ICP备案，新备案域名需24小时后才可配置。域名格式只支持英文大小写字母、数字及"-"，不支持IP地址。配置业务域名后，可打开任意合法的子域名。
    </p>
    <p style="font-weight: bold">
      1）每个小程序账号支持配置最多200个域名；2）每个域名支持绑定最多100个主体的小程序；3）域名只支持https的协议，不支持IP地址；
    </p>
    <p style="color: red">根据微信规则，配置新域名后，请联系商协邦客服发布版本后生效。</p>
    <a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="list">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-icon slot="actions" type="delete" @click="handleDel(item)" />
        <a-list-item-meta :description="item">
          <a slot="title" href="https://www.antdv.com/">域名{{ index + 1 }}</a>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
    <a-button type="primary" @click="handleShowModal">添加</a-button>
    <AddModal ref="addModal" @reload="getDomainList" />
  </div>
</template>

<script>
import { DomainList, DomainAction } from '@/api/system/system'
import AddModal from './addModal.vue'
export default {
  components: {
    AddModal,
  },
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.getDomainList()
  },
  methods: {
    async getDomainList() {
      let res = await DomainList()
      this.list = res.data.direct_webviewdomain || []
    },
    handleShowModal() {
      this.$refs.addModal.show()
    },
    async handleDel(domain) {
      var _this = this
      this.$confirm({
        title: '提示',
        content: '删除后，小程序将无法访问该域名的链接，如需访问请重新添加！',
        onOk: async () => {
          let { code, msg } = await DomainAction({
            action: 'delete', //action=delete 删除操作
            webviewdomain: [domain],
          })
          _this.$message[code === 0 ? 'success' : 'error'](msg)
          if (code === 0) {
            _this.getDomainList()
          }
        },
        onCancel() {},
      })
    },
  },
}
</script>

<style>
.demo-loadmore-list {
  min-height: 350px;
  width: 500px;
}
</style>